<template>
  <div class="top-header" ref="top-header">
    <dv-decoration-10 class="header-left-decoration" />
    <dv-decoration-3 class="header-center-decoration" />
    <dv-decoration-10 class="header-right-decoration" />
    <div class="left-subtitle">{{ company }}</div>
    <div @click="clickTitle" class="center-title">{{title}}</div>
    <div class="right-subtitle">
      {{datetime}}
      <q-btn style="z-index: 999;" :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'" dense flat @click="setFullScreen">
        <q-tooltip>{{ fullscreen ? '恢复' : '全屏' }}</q-tooltip>
      </q-btn>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { date, AppFullscreen } from 'quasar';

export default defineComponent({
  name: 'topHeader',
  props: {
    company: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '数据看板'
    }
  },
  data () {
    return {
      datetime: '',
      week: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      fullscreen: false
    }
  },
  mounted () {
    setInterval(() => {
      this.datetime = `${date.formatDate(Date.now(), 'YYYY年MM月DD日 HH:mm:ss')} ${this.week[date.getDayOfWeek(Date.now()) - 1]}`;
    }, 1000);

    setTimeout(() => {
      this.triggerResize(); // 左右的装饰条会比较短，通知刷新一下
    }, 900);
  },
  methods: {
    clickTitle () {
      this.$emit('change');
    },
    setFullScreen () {
      if (!this.fullscreen) {
        AppFullscreen.request().then(() => {
          this.fullscreen = true;
        }).catch(err => {
          this.fullscreen = false;
          console.log(err);
        });
      } else {
        // 退出全屏模式：
        AppFullscreen.exit().then(() => {
          this.fullscreen = false;
        }).catch(err => {
          console.log(err);
        })
      }
    },
    triggerResize () {
      // 创建并触发一个resize事件
      const event = document.createEvent('HTMLEvents');
      event.initEvent('resize', true, true);
      window.dispatchEvent(event);
    }
  }
});
</script>

<style lang="scss">
.top-header {
  position: relative;
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  .header-center-decoration {
    width: 300px;
    height: 25px;
    margin-top: 60px;
  }
  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }
  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }
  .left-subtitle {
    position: absolute;
    top: 50px;
    left: 40px;
    font-size: 18px;
  }
  .right-subtitle {
    position: absolute;
    top: 50px;
    right: 40px;
    font-size: 18px;
  }
}
</style>
